<template>
  <div>
    <van-nav-bar
      title="订单详情"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="order_detail">
      <van-panel :title="order.consignee +' '+  order.mobile" :status="order.statusName">
        <div class="address_detail">
          {{order.consigneeAddress}}
          <br>
        </div>
        <div slot="footer"
             class="footer_btn">
          <van-button size="small" type="default" @click="contact">联系客服</van-button>
          <van-button size="small" type="danger" @click="payment" v-show="order.statusName=='待付款'">立即付款</van-button>
          <van-button size="small" type="danger" @click="confirmReceive" v-show="order.statusName=='已发货'">确认收货</van-button>
        </div>
      </van-panel>
      <van-panel :title="'订单编号: ' + order.orderSn">
        <van-card v-for="(orderItem, index) in order.items"
                  :key="index"
                  :title="orderItem.goods.name"
                  :desc="orderItem.goods.descript"
                  :price="orderItem.price"
                  :num="orderItem.count"
                  @click="toGoods(orderItem.goods.id)"
                  :thumb="imgUrl+orderItem.goods.pic">

        </van-card>
      </van-panel>
      <div class="total">
        <text style="color: #ff4444">合计: <text>{{ order.totalPrice }}</text></text>
      </div>
      <van-panel title="订单信息" >
        <van-cell-group>
          <van-cell title="订单编号" :value="order.orderSn" />
          <van-cell title="备注" :value="order.message"   />
          <van-cell title="创建时间" :value="order.createTime"/>
        </van-cell-group>
      </van-panel>
      <br><br><br>
    </div>
  </div>
</template>

<script>
import utils from '@/utils/index.js'
export default {
  config: {
    navigationBarTitleText: '我的'
  },
  data() {
    return {
      activeFooter: 3,
      title: '',
      imgUrl: 'http://81.68.147.56:9531/mobile-api/file/getImgStream?idFile=',
      order: {orderSn: ''}
    }
  },

  onLoad(options) {
    this.order.orderSn = options.orderSn
  },

  onShow() {
    this.getData()
  },
  methods: {
    getData() {
      this.$API.get('/user/order/' + this.order.orderSn).then(res => {
        // console.log('res', res)
        let order = res.data
        // 不支持在 template 内使用 methods 中的函数。所以在这里格式化一下金额
        for (let i = 0; i < order.items.length; i++) {
          order.items[i].price = utils.formatPrice(order.items[i].price)
        }
        order.totalPrice = utils.formatPrice(order.totalPrice)
        this.order = order
      })
    },
    toGoods(id) {
      const url = '../../goods/index?id=' + id
      wx.navigateTo({url})
    },
    confirmReceive() {
      console.log('敬请期待')
    },
    payment() {
    },
    contact() {
      console.log('敬请期待')
    },
    onClickLeft() {
    }
  }
}
</script>

<style >

  .address_detail {
    padding-left: 10px;
  }

  .order_detail > .van-panel {
    margin-top: 5px;
  }

  .order_detail > .van-card {
    background-color: #fff;
  }

  .total {
    text-align: right;
    padding: 10px;
  }

  .order_detail > .footer_btn {
    text-align: right;
  }

  .order_detail > .footer_btn > .van-button {
    margin-left: 10px;
  }

  .order_detail > .address_detail {
    padding: 5px;
  }

</style>
